<template>
    <div>
        <div class="container">
            <div class="agreementBox" v-show="show">
                <div class="agreementBody">
                    <p class="agreementTitle">注册协议及隐私政策</p>
                    <div class="agreeLine"></div>
                    <div class="agreeContent">
                        <p>在您注册成为京东用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
                            <span class="importantTip">请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）：</span>
                        </p>
                        <p class="linkTop">《京东用户注册协议》</p>
                        <p class="linkContent">《京东隐私政策》</p>
                        <p class="linkBottom">《订单共享与安全》</p>
                        <p>
                            <span class="importantTip">【请您注意】如果您不同意上述协议或其中任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息、阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容；并表明您也同意京东可以依据以上的隐私政策内容来处理您的个人信息。</span>如您对以上协议内容有任何疑问，您可随时与京东客服联系。</p>
                    </div>
                    <div class="agreeBtnWrap">
                        <p class="agreeNotice">
                            <span>点击同意即表示您已阅读并同意
                                <a href="https://in.m.jd.com/help/app/register_info.html">《京东用户注册协议》</a>与
                                <a href="https://in.m.jd.com/help/app/private_policy.html">《京东隐私政策》</a>并将您的订单信息共享给为完成此订单所必须的第三方合作方。关于
                                <a href="https://in.m.jd.com/help/app/order_sharing_info.html">《订单共享与安全》</a>
                            </span>
                        </p>
                        <div class="agreeBtns">
                            <router-link to='/login' class="btns notAgreeBtn">不同意</router-link>
                            <a class="btns agreeBtn" @click="show=false">同意</a>
                        </div>
                    </div>
                </div>
            </div>
            <header>
                <router-link class="back" to='/login' v-show="pageShow"></router-link>
                <a class="back" v-show="!pageShow" @click="back"></a>
                <span class="headerTxt">{{title}}</span>
            </header>
            <section class="page" v-show="pageShow">
                <div class="pageWrap">
                    <div class="inputContainer">
                        <label class="areaBox">
                            <span class="areaCode">+86</span>
                            <span class="areaIcon" @click="area"></span>
                        </label>
                        <input v-model="username" class="phone" id="phone" type="tel" placeholder="请输入手机号" @focus="closeShow=true" @blur="closeShow=false" maxlength="11">
                        <span class="close" v-show="closeShow" @click="clearInput"></span>
                    </div>
                    <div class="inputContainer">
                        <label class="areaBox psw">
                            <span class="areaCode">密码</span>
                        </label>
                        <input v-model="password" class="phone" id="password" type="password" placeholder="请输入密码" @focus="closeShow1=true" @blur="closeShow1=false" minlength="6">
                        <span class="close" v-show="closeShow1" @click="clearInput1"></span>
                        <div class="eye" @click="cutEye"></div>
                    </div>
                    <div class="inputContainer ver">
                        <div class="verBox" @click="verEvent">
                            <img src="../../static/register/init.gif" v-show="imgShow" class="fail">
                            <img src="../../static/register/loading.gif" v-show="!imgShow" class="success">
                            <span class="verTxt">点击完成验证</span>
                        </div>
                    </div>
                </div>
            </section>
            <section class="codePage" v-show="!pageShow">
                <dl class="*" v-for="val in phoneArr" :key="val.id" :id="val.title">
                    <dt>{{val.title}}</dt>
                    <dd v-for="val1 in val.arr" :key="val1.id" @click="phoneCode(val1.num)">
                        <span class="sesc">{{val1.country}}</span>
                        <span class="code">{{val1.num}}</span>
                    </dd>
                </dl>
                <div class="navBar">
                    <a :href="'#'+val3.title" v-for="val3 in phoneArr" :key="val3.id" v-if="val3.title!='*'">{{val3.title}}</a>
                </div>
            </section>
            <div class="errorDialog">
                <span class="toast">{{message}}</span>
            </div>
            <ValidateBox></ValidateBox>
        </div>
        <canvas id="canBox" width="750px" height="1331px" @touchstart.stop.prevent="down($event)" @touchend.stop.prevent="up()" @touchmove.stop.prevent="move($event)"></canvas>
    </div>
</template>

<script>
import $ from 'jquery'
import ValidateBox from '@/components/ValidateBox'
export default {
    data(){
        return {
            show:true,
            title:'京东注册',
            pageShow:true,
            closeShow:false,
            closeShow1:false,
            imgShow:true,
            array_paint:[],
            current_y:0,
            current_x:0,
            m_down:false,
            phoneArr:[],
            eye:true,
            username:'',
            password:'',
            isrepeat:false,
            message:'手机号格式错误'
        }
    },
    created(){
        this.getPhone();
    },
    components:{
        ValidateBox
    },
    methods:{
        area(){
            this.title='选择国家或者地区';
            this.pageShow=false;
        },
        back(){
            this.title='京东注册';
            this.pageShow=true;
        },
        clearInput(){
            this.username='';
        },
        clearInput1(){
            this.password='';
        },
        verEvent(){
            var reg=/^1[3578]\d{9}$/;
            if(!reg.test($('#phone').val())){
                this.message='手机号格式错误';
                setTimeout(()=>{
                    $('.toast').css('opacity','1');
                    setTimeout(()=>{
                        $('.toast').css('opacity','0');
                    },2000);
                },100);
            }else{
                this.axios.post('/users').then((ret)=>{
                    let {data,error}=ret.data;
                    var i=0;
                    $(data).map((index,val)=>{
                        if(val.phone==this.username){
                           i++;
                        }
                    })
                    if(i!==0){
                        this.isrepeat=false;
                    }else{
                        this.isrepeat=true;
                    }
                    if(this.isrepeat){
                        this.axios.post('/addusers',{
                            phone:this.username,
                            password:this.password
                        }).then(()=>{
                            this.imgShow=false;
                            $('.verTxt').html('安全检测中')
                            setTimeout(()=>{
                                $('#validatebox').css('display','block').addClass('regBox');
                                $('.smallImg .txt').html('请按照箭头路线滑动手指').css('width','100%');
                                $('#canBox').css('display','block');
                            },1000)
                        }).catch(()=>{})
                    }else{
                        this.message='该手机号已被绑定，30天内不可解绑';
                        setTimeout(()=>{
                            $('.toast').css('opacity','1');
                            setTimeout(()=>{
                                $('.toast').css('opacity','0');
                            },2000);
                        },100);
                    }
                }).catch(()=>{})
            }
        },
        down(event){
            this.m_down = true;
            this.current_x = event.touches[0].clientX-$('#canBox').offset().left;
            this.current_y = event.touches[0].clientY;
            this.array_paint.push([this.current_x, this.current_y]);
            this.paint();
        },
        up(){
            this.m_down = false;
            this.array_paint = [];
            $('#canBox').css('display','none');
            setTimeout(()=>{
                $('#validatebox').css('display','none');
                $('.verBox .verTxt').html('验证成功');
                $('.verBox .success').prop('src','https://h5.360buyimg.com/jcap/img/success.gif');
                setTimeout(()=>{
                    this.$router.push('/login');
                },2000);
            },1000);
        },
        move(event){
            if (this.m_down) {
                this.current_x = event.touches[0].clientX;
                this.current_y = event.touches[0].clientY;
                this.array_paint.push([this.current_x, this.current_y]);
                this.paint();
            }
        },
        paint(){
            var canvas_ = document.getElementById("canBox");
            var context = canvas_.getContext("2d");
            context.strokeStyle = "rgb(140,217,65)";
            context.lineWidth = 5;
            context.beginPath();
            context.moveTo(this.array_paint[0][0], this.array_paint[0][1]);
            if (this.array_paint.length == 1)
                context.lineTo(this.array_paint[0][0] + 1, this.array_paint[0][1] + 1);
            else {
                var i = 1;
                for (i in this.array_paint) {
                    context.lineTo(this.array_paint[i][0], this.array_paint[i][1]);
                    context.moveTo(this.array_paint[i][0], this.array_paint[i][1]);
                }
            }
            context.closePath();
            context.stroke();
        },
        getPhone(){
            this.axios.get('/phone').then((ret)=>{
                let {data,error}=ret.data;
                this.phoneArr=data;
            }).catch(()=>{})
        },
        phoneCode(num){
            $('.areaBox .areaCode').html(num);
            this.back();
        },
        cutEye(){
            if(this.eye){
                $('.eye').css({
                    backgroundImage:'url()'
                })
                $('#password').prop('type','text');
                this.eye=false;
            }else{
                $('.eye').css({
                    backgroundImage:'url()'
                })
                $('#password').prop('type','password');
                this.eye=true;
            }
        },

    }
}
</script>

<style scoped lang='scss'>
.container {
    background-color: #f7f7f7;
    height: 1331px;
    .agreementBox {
        position: fixed;
        width: 750px;
        height: 100%;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.5);
        overflow: hidden;
        font-family: PingFangSC-Regular;
        .agreementBody {
            width: 100%;
            box-sizing: border-box;
            position: absolute;
            bottom: 0;
            padding: 0 23px;
            background: #f8f8f8;
            overflow: hidden;
            border-radius: 7px;
            .agreementTitle {
                margin: 0;
                width: 100%;
                font-weight: 700;
                font-size: 42px;
                padding: 29px 0;
                text-align: center;
                color: #000;
                line-height: 1.5;
            }
            .agreeLine {
                border-top: 2px solid #d7d7d7;
                width: 104%;
                margin-left: -23px;
            }
            .agreeContent {
                height: 445px;
                font-size: 30px;
                padding-top: 29px;
                color: #000;
                overflow-y: scroll;
                overflow-x: hidden;
                text-align: left;
                width: 100%;
                box-sizing: border-box;
                p {
                    margin: 0;
                    font-size: 30px;
                    line-height: 42px;
                    .importantTip {
                        font-weight: 700;
                        text-decoration: underline;
                    }
                }
                .linkTop {
                    margin-top: 23px;
                }
                .linkBottom {
                    margin-bottom: 23px;
                }
            }
            .agreeBtnWrap {
                left: 0;
                bottom: 0;
                width: 100%;
                background-color: #f8f8f8;
                box-sizing: border-box;
                .agreeNotice {
                    text-align: left;
                    font-size: 30px;
                    padding: 23px 11px 0 0;
                    box-sizing: border-box;
                    color: #000;
                    margin: 0;
                    line-height: 1.5;
                    span {
                        font-weight: 700;
                        line-height: 30px;
                        a {
                            color: #e93b3d;
                        }
                    }
                }
                .agreeBtns {
                    height: 128px;
                    font-size: 37px;
                    text-align: center;
                    padding-bottom: 20px;
                    .btns {
                        display: block;
                        text-align: center;
                        width: 40%;
                        line-height: 91px;
                        margin: 18px 0;
                        border-radius: 7px;
                        text-decoration: none;
                    }
                    .notAgreeBtn {
                        float: left;
                        color: #000;
                        margin-left: 23px;
                        background: #fff;
                        border: 2px solid #d7d7d7;
                    }
                    .agreeBtn {
                        float: right;
                        color: #fff;
                        margin-right: 23px;
                        border: 2px solid #e93b3d;
                        background: #e93b3d;
                    }
                }
            }
        }
    }
    header {
        height: 103px;
        line-height: 103px;
        background: #fff;
        font-size: 40px;
        z-index: 999;
        text-align: center;
        position: relative;
        border-bottom: 2px solid #bbb;
        background-color: #f9f9f9;
        .back {
            width: 56px;
            height: 56px;
            display: block;
            position: absolute;
            background: url(/static/login/back.png) no-repeat;
            background-size: 100% auto;
            top: 23px;
            left: 47px;
        }
    }
    .page {
        padding: 35px;
        .pageWrap {
            .inputContainer {
                position: relative;
                width: 100%;
                height: 105px;
                line-height: 105px;
                overflow: hidden;
                padding: 0 11px;
                margin-top: 35px;
                background-color: #fff;
                box-sizing: border-box;
                .areaBox {
                    position: absolute;
                    width: 145px;
                    text-align: right;
                    .areaCode {
                        text-align: right;
                        line-height: 105px;
                        font-size: 33px;
                    }
                    .areaIcon {
                        width: 0;
                        height: 0;
                        border-left: 9px solid transparent;
                        border-right: 9px solid transparent;
                        border-top: 11px solid #ababab;
                        display: inline-block;
                        margin: 0 16px 0 4px;
                        padding-top: 2px;
                    }
                }
                .psw {
                    text-align: center;
                }
                .phone {
                    width: 100%;
                    padding-right: 70px;
                    margin-left: 0;
                    padding-left: 140px;
                    border: 0;
                    border-radius: 0;
                    display: inline-block;
                    box-sizing: border-box;
                    font-size: 33px;
                    outline: 0;
                    margin-top: 35px;
                    &::-webkit-input-placeholder {
                        color: #ccc;
                    }
                }
                .close {
                    width: 46px;
                    height: 46px;
                    position: absolute;
                    top: 29px;
                    right: 23px;
                    background-position: 0 0;
                    overflow: hidden;
                    background: url(/static/register/close.png) no-repeat;
                    background-size: 100% auto;
                }
                .eye {
                    position: absolute;
                    width: 56px;
                    height: 56px;
                    background-image: url(/static/login/eyebi.png);
                    background-repeat: no-repeat;
                    background-size: 100% auto;
                    box-sizing: border-box;
                    right: 100px;
                    top: 30px;
                    z-index: 99;
                }
            }
            .ver {
                padding: 0;
                text-align: left;
                .verBox {
                    height: 105px;
                    box-sizing: border-box;
                    text-align: left;
                    font-size: 32px;
                    border: 3px solid #409eff;
                    border-radius: 4px;
                    background: #fff;
                    img {
                        margin-top: 24px;
                        height: 50px;
                        padding: 0 21px;
                        vertical-align: top;
                        position: absolute;
                        border: 0;
                    }
                    .verTxt {
                        font-size: 33px;
                        line-height: 105px;
                        margin: 0 93px;
                        color: #409eff;
                    }
                }
            }
        }
    }
    .codePage {
        position: absolute;
        top: 105px;
        left: 0;
        bottom: 0;
        background-color: #fff;
        width: 750px;
        .navBar {
            position: absolute;
            margin-top: 101px;
            right: 0;
            top: 0;
            width: 52px;
            background-color: #fff;
            font-size: 25px;
            color: #2d90ff;
            a {
                display: block;
                text-align: center;
                color: #2d90ff;
                margin: 0;
                height: 30px;
                line-height: 30px;
                text-decoration: none;
            }
        }
        dl {
            background-color: #fff;
            margin: 0;
            padding: 0;
            dt {
                line-height: 101px;
                text-align: left;
                background-color: #f5f5f5;
                padding: 0 52px 0 35px;
                color: #999;
                font-size: 30px;
            }
            dd {
                line-height: 101px;
                text-align: left;
                padding: 0;
                border-bottom: 2px solid #dbdbdb;
                margin: 0 52px 0 35px;
                font-size: 42px;
                .sesc {
                    color: #333;
                }
                .code {
                    float: right;
                    padding-right: 28px;
                    color: #999;
                    font-size: 30px;
                }
            }
        }
    }
    .errorDialog {
        padding: 23px 35px;
        color: #fff;
        z-index: 200;
        text-align: center;
        .toast {
            opacity: 0;
            max-width: 80%;
            background: #2b2b2b;
            padding: 23px 35px;
            display: inline-table;
            text-align: left;
            border-radius: 7px;
            font-size: 28px;
            line-height: 1.5;
            transition: all 0.5s ease;
        }
    }
}

#canBox {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10000000;
    display: none;
}
</style>
